<template>
  <div class="info-body">
    <el-row :gutter="20">
      <el-col :span="item.label!=='产品URL'? '8' : '24' " v-for="(item,index) in infoList" :key="index"
              class="editDetail">
        <div v-if="item.label !== '产品URL'" style="display: flex;margin-bottom: 1em">
          <div class="info-label">{{ item.label }} :</div>
          <div style="margin-left: 5px">{{ item.value }}</div>
        </div>
        <div v-else style="display: flex;margin-bottom: 1em">
          <el-col class="editDetail_label" :span="4" style="text-align: right">
            产品URL :
          </el-col>
          <el-col class="purl">
            <div v-if="item.value.androidUrl !== '' && item.value.androidUrl !== null">
              Android : {{ item.value.androidUrl }}
            </div>
            <div v-if="item.value.iosUrl !== '' && item.value.iosUrl !== null">
              ios : {{ item.value.iosUrl }}
            </div>
            <div v-if="item.value.websiteUrl !== '' && item.value.websiteUrl !== null">
              ios : {{ item.value.websiteUrl }}
            </div>
          </el-col>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {getAllUser} from "@/api/user";

export default {
  name: "requestDetail",
  props: {
    requestDetailInfo: Object,
    offerInfo: Object,
  },
  data() {
    return {
      infoList: [],
    }
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      let info = this.requestDetailInfo
      let designers = [];
      let designerManager;
      let creativeType = [];
      let requester
      Promise.all([
        getAllUser({statusList: '0,1,2', isAll: true}).then((res) => {
          let allUserList = res.data.data;
          if (allUserList.length > 0) {
            let designersIdList = info.designers.split(",");
            allUserList.map(item => {
              if (item.id === info.designerManager) {
                designerManager = item.realName;
              }
              if (item.id === info.requester) {
                requester = item.realName;
              }
              if (designersIdList.includes(item.id)) {
                designers.push(item.realName);
              }
            })
          }
        })
      ]).then(result => {
        if (result) {
          let checkedCreativeTypeList = [
            {id: "0", name: "图片"},
            {id: "1", name: "视频"},
          ]
          info.creativeType.split(',').map(item => {
            checkedCreativeTypeList.map(it => {
              if (it.id === item) {
                creativeType.push(it.name)
              }
            })
          })
          let urgency = info.urgency == 1 ? '紧急' : '一般';
          this.infoList = [
            // {label: '需求ID', value: info.shortId},
            {label: 'offer', value: info.offerName},
            {label: '需求方', value: requester},
            {label: '媒体', value: info.platform},
            {
              label: '产品URL', value: {
                androidUrl: this.offerInfo.androidAppUrl,
                iosUrl: this.offerInfo.iosAppUrl,
                websiteUrl: this.offerInfo.websiteAppUrl,
              }
            },
            {label: '素材类型', value: creativeType.join(',')},
            {label: '紧急程度', value: urgency},
            {label: '设计师负责人', value: designerManager},
            {label: '设计师', value: designers.join("，")},
            {label: '交付日期', value: info.expectedTime},
            {label: '制作日期', value: info.planTime},
            {label: '实际完成时间', value: info.actualTime},
          ];
          // console.log('requestDetailInfo',this.requestDetailInfo);
          // console.log('offerInfo',this.offerInfo)
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.info-body {
  width: 100%;
  background-color: rgba(245, 245, 245, 100);
  border: 1px solid rgba(232, 232, 232, 100);
  border-radius: 10px;
  padding-top: 1em;
}

.info-label {
  width: 50%;
  text-align: right;
}

.purl {
  flex: 1;


  div {
    display: inline-block;
    margin-right: 20px;
  }
}
</style>
